<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web中不同的弹出层</title>
    <link rel="stylesheet" href="/common/dest/css/common.css">
    <script src="/common/dest/js/jquery.min.js"></script>
    <style>
        .ex-layer{
            position: relative;
            border-radius: 8px;
            margin: 20px 80px;
            padding: 15px;
            color: #fff;
            font-size: 20px;
            background: #333;
            border: 4px solid #c2e1f5;
            text-align: right;
        }
        .ex-layer pre{
            text-align: left;
        }
        .ex-layer .btn{
            background: #fafafa;
            border-radius: 3px;
            font-size: 12px;
            color: #333;
            line-height:30px;
            padding: 0 10px;
            display: inline-block;
        }
    </style>
</head>
<body style="background: url(/common/dest/images/noisebg.png) repeat">
<div class="ex-layer">
    <pre>
        最简
        layer.open({
            content:"内容"
        });
    </pre>
    <a href="javascript:;" class="btn btn-1">点我预览</a>

    <pre>
        修改title
        layer.open({
            type:0,
            content:"内容哦",
            title:"改变title"
        });
        //说明
        //title:false-->隐藏title;
    </pre>
    <a href="javascript:;" class="btn btn-2">点我预览</a>

    <pre>
        添加多个按钮
        layer.open({
            type:0,
            content:"内容",
            btn:["确定","取消","退出"]
        });
    </pre>
    <a href="javascript:;" class="btn btn-3">点我预览</a>

    <pre>
        邦定按钮事件
        layer.open({
            type:0,
            content:"内容",
            btn:["确定","取消"],
            yes:function(){
                alert("点击确定了")
            },
            btn2:function(){
                alert("点击取消了,并且会关闭弹窗")
            }
        });
        //btn可以无限
    </pre>
    <a href="javascript:;" class="btn btn-4">点我预览</a>
</div>
<div class="ex-layer">
    <pre>
        换肤
        layer.open({
            content:"内容",
            skin:"layer2"//此样式并未编入插件，示例展示用
        });
    </pre>
    <a href="javascript:;" class="btn btn-changer">点我预览</a>
</div>
<div class="ex-layer">
    <pre>
        加载弹窗
        layer.load(2);
        //效果有1-3，可在less新增更多
    </pre>
    <a href="javascript:;" class="btn btn-5">点我预览</a>
    <a href="javascript:;" class="btn btn-close-5" style="display: none;">关闭</a>


    <pre>
        加载弹窗，加载时间10s
        layer.load(1,{time:10*1000});
    </pre>
    <a href="javascript:;" class="btn btn-6">点我预览</a>
    <pre>
        原始加载写法
        layer.open({
            type:1,
            icon:3,//加载效果1-3,默认1
            time:10*1000,
            content:"加载中..."
        });
        //load封装了方法,实现都一样
    </pre>
    <a href="javascript:;" class="btn btn-7">点我预览</a>
</div>
<div class="ex-layer">
    <pre>
        关闭弹窗
        layer.close(index);
        //每个弹窗都会返回index值
        关闭所有弹窗
        layer.closeAll();
    </pre>
</div>
<div class="ex-layer">
    <pre>
        msg小提示弹窗
        layer.msg("内容")
    </pre>
    <a href="javascript:;" class="btn btn-8">点我预览</a>
    <pre>
        msg弹窗,增加结束回调
        layer.msg("内容",function(){
            alert("窗口消息执行")
        })
    </pre>
    <a href="javascript:;" class="btn btn-9">点我预览</a>
</div>
<div class="ex-layer">
    <pre>
        alert提示弹窗
        layer.alert("内容")
    </pre>
    <a href="javascript:;" class="btn btn-10">点我预览</a>
    <pre>
        alert提示弹窗,回调
        layer.alert("内容",function(){
            alert("ss");
            layer.close(idx);
        });
        //不会主动关闭弹窗,需手动添加关闭
    </pre>
    <a href="javascript:;" class="btn btn-11">点我预览</a>
</div>
<div class="ex-layer">
    <pre>
        tips弹窗
        layer.tips("内容",".abc","left");
    </pre>
    <div class="abc" style="margin: 15px;font-size: 12px; width: 80px;height: 40px;border: 1px solid #ddd;text-align: center;line-height: 40px">tips弹窗</div>
    <a href="javascript:;" class="btn btn-12">点我预览</a>
</div>
<div class="ex-layer">
    <pre>
        多个弹窗同时存在
        layer.open({
            content:"弹窗n哦",
            shade:false,
            zIndex: layer.zIndex, //重点1
            success: function(t){
                layer.setTop(t); //重点2
            }
        });
    </pre>
    <a href="javascript:;" class="btn btn-more">多次弹窗</a>
</div>
<script src="/common/src/layer/js/layer.js"></script>
<script>
    (function () {
        $(".btn-1").on("click",function(){
            layer.open({
                content:"内容"
            });
        });
        $(".btn-2").on("click",function(){
            layer.open({
                type:0,
                content:"内容哦",
                title:"改变title"
            });
        });
        $(".btn-3").on("click",function(){
            layer.open({
                type:0,
                content:"内容",
                btn:["确定","取消","退出"]
            });
        });
        $(".btn-4").on("click",function(){
            layer.open({
                type:0,
                content:"内容",
                btn:["确定","取消"],
                yes:function(){
                    alert("点击确定了")
                },
                btn2:function(){
                    alert("点击取消了,并且会关闭弹窗")
                }
            });
        });

        var idx;
        $(".btn-5").on("click",function(){
            idx=layer.load(2);
            $(".btn-close-5").show();
        });
        $(".btn-close-5").on("click",function(){
            layer.close(idx);
            $(".btn-close-5").hide();
        });
        $(".btn-6").on("click",function(){
            layer.load(1,{time:10*1000});
        });
        $(".btn-7").on("click",function(){
            layer.open({
                type:1,
                icon:1,//加载效果1-3,默认1
                time:10*1000,
                content:"加载中..."
            });
        });
        $(".btn-8").on("click",function(){
            layer.msg("内容")
        });
        $(".btn-9").on("click",function(){
            layer.msg("内容",function(){
                alert("窗口消息执行")
            })
        });
        $(".btn-10").on("click",function(){
            layer.alert("内容")
        });
        $(".btn-11").on("click",function(){
            var i=layer.alert("内容",function(){
                alert("ss");
                layer.close(i)
            })
        });
        $(".btn-12").on("click",function(){
            layer.tips("内容",".abc","left");
        });

        var num=0;
        $(".btn-more").on("click",function(){
            num++;
            layer.open({
                content:"弹窗"+num+"哦",
                shade:false,
                zIndex: layer.zIndex, //重点1
                success: function(t){
                    layer.setTop(t); //重点2
                }
            });
        });
        $(".btn-changer").on("click",function(){
            layer.open({
                content:"内容",
                skin:"layer2"
            })
        });
    })();
</script>
</body>
</html>
